
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="${root}images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="${root}images/apple-touch-icon.png">
	<title>365会员</title>
    <link rel="stylesheet" href="${root}css/seedsui.min.css">
    <style>
    body{
    	background-color: white;
    }
    .btnprice {
    border-color: #e5e5e5;color: #e5e5e5;
    }
    .titlebar>.active{
    	border-color: #f4984e;
    	color: #f4984e;
    }
    
    </style>
</head>

<body ontouchstart="">
	<header>
	    <div class="titlebar ">
            <a class="titlebar-button" href="javascript:back()">
                <img style="width: 30px;height: 30px;border-radius: 80px;" src="${www}${session.user.img!}" />
                <span style="display:none; width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${session.user.nickname!}aaa少时诵诗书</span>
            </a>
            <h4 class="titlebar-title"> 
            <img style="width: 24px;height: 24px;border-radius: 80px;" src="${root}img/vip/vip${session.user.vip>0?'365':'0'}.png" />
            <small>&nbsp;${session.user.vip>0?'尊敬的会员，您好!':'开通会员点亮你的小皇冠'}</small></h4>
            <a class="button warn outline" style="display:none;width: 60px;height: 24px;border-radius: 15px;margin-right: 2px;" >
                	<small style="color: #f4984e;">开通</small>
            </a>
            <a class="titlebar-button" href="${root}menu">
            <i class="icon size20 icon-menudot" style="margin-right: 8px;"></i>
            </a>
        </div>
	</header>
	<article style="bottom: 50px;margin-top:44px;">
	<div class="bgfilter" style="height:150px; background-image:url(${root}img/bg/10.jpg);background-position:center;background-size:cover;">
	<br/><br/><h4 class="text-center" style="color: white;">${session.user.nickname!}</h4>
	<br/>
	<!--:if(session.user.vip>0){ -->
	<div style="text-align: center;">
	<p style="color: white;">${session.user.vip_end_time,"yyyy-MM-dd"}到期
	<a id="kthy" class="button warn" style="width: 80px;height: 24px;border-radius: 15px;margin-right: 2px;" >
     <small style="color:white;">续费会员</small>
    </a></p>
	</div>
	<!--:}else{  -->
	<div style="text-align: center;">
	<p style="color: white;">会员可享VIP视频任意看!
	<a id="kthy" class="button warn" style="width: 80px;height: 24px;border-radius: 15px;margin-right: 2px;" >
     <small style="color:white;">开通会员</small>
    </a></p>
	</div>
	<!--:}  -->
	</div>
		<div class="group" style="position: initial;">
		
		<ul class="grid" data-col="5">
			<li>
				<a class="grid-icon size30 bg-1" style="border-radius: 60px;">
					<i class="icon icon-contact-fill size24"></i>
				</a>
				<label class="grid-label">等级</label>
			</li>
			<li>
				<a class="grid-icon size30 bg-2" style="border-radius: 60px;">
					<i class="icon icon-write-fill size24"></i>
				</a>
				<label class="grid-label">折扣</label>
			</li>
			<li>
				<a class="grid-icon size30 bg-3" style="border-radius: 60px;">
					<i class="icon icon-position-fill size24"></i>
				</a>
				<label class="grid-label">活动</label>
			</li>
			<li>
				<a class="grid-icon size30 bg-4" style="border-radius: 60px;">
					<i class="icon icon-gear-fill size24"></i>
				</a>
				<label class="grid-label">离线</label>
			</li>
			<li>
				<a class="grid-icon size30 bg-5" style="border-radius: 60px;">
					<i class="icon icon-folder-fill size24"></i>
				</a>
				<label class="grid-label">文档</label>
			</li>
		</ul>
		</div>


<div class="sliver "  style="text-align: center;">
			<ul class="tabbar tabbar-rect" data-col="3" id="ID-Tabbar" style="width:60%;">
                <li class="tab ${p.desc!='num'?'active':''}" onclick="location.href='${root}vip/?desc=id'" data-id="ID-CssCompoents">
                    <label class="tab-label">最新</label>
                </li>
                <li class="tab ${p.desc=='num'?'active':''}" onclick="location.href='${root}vip/?desc=num'" data-id="ID-JsCompoents">
                    <label class="tab-label">最热</label>
                </li>
            </ul>
		</div>
        <ul class="grid app-grid-thumbnail" data-col="2">
        	<!--:for(c in obj!){  -->
			<li style="padding-top: 2px;" onclick="location.href='${root}course/${c.id}'">
				<a class="grid-icon">
					<img src="${www}${c.img!}" style="height: 100px;width: 100%;border-radius: 3px;">
					<!--:if(cLP.index==1){  -->
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">新</span>
					<!--:}  -->
				</a>
				<label class="grid-label" style="color:#333333;margin-left:4px;text-align:left;">${c.title}</label>
				<!--:if(c.price>0){  -->
				<small style="color:#ff5656;margin-left:4px;float: left;">${c.price}</small>
				<!--:}else{  -->
				<small style="color:${c.vip>0?'#f4984e':'#16c447'};margin-left:4px;float: left;">${c.vip>0?'VIP视频':'免费'}</small>
				<!--:}  -->
				<small style="float: right;color: #14ba91;">${c.agency_name!}</small>
			</li>
			<!--:}  -->
		</ul>
	</article>
	<footer style="position: fixed;left: 0;bottom: 0;">
		<ul class="tabbar tabbar-footer reverse">
            <li class="tab " onclick="location.href='${root}'">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab" onclick="location.href='${root}course/cate'">
                <i class="icon icon-layer"></i>
                <label class="tab-label">课程</label>
            </li>
            <li class="tab active" >
                <img src="${root}img/vip/365.png" style="height: 24px;width: 24px;">
                <label class="tab-label">VIP</label>
            </li>
            <li class="tab" onclick="location.href='${root}zb/'">
                <i class="icon icon-video"></i>
                <label class="tab-label">直播</label>
            </li>
            <li class="tab" onclick="location.href='${root}users/'">
                <i class="icon icon-user"></i>
                <label class="tab-label">我的</label>
            </li>
        </ul>
	</footer>
	<div id="kt" style="display: none;position: fixed;bottom: 0%;background-color: white;z-index: 999;height: 284px;">
	<form action="${root}vip/pay" method="post">
	<input type="hidden" id="price" name="price" value="365" />
	<input type="hidden" id="type" name="type" value="365" />
	<div class="" style="padding: 8px 0;">
            <ul class="tabbar tabbar-rect " style="width:70%;">
            <li class="tab active tabvip">
                <label class="tab-label"><i class="icon icon-user"></i>365会员</label>
            </li>
            <li class="tab tabvip">
                <label class="tab-label"><i class="icon icon-qq"></i>铂金会员</label>
            </li>
        </ul>
        <a id="kthyclose" style="position: fixed;right: 5px;margin-top:-30px;z-index: 9999;"><i class="icon icon-rdoclose"></i></a>
        
        <div style="background-color: white;color: #666;">
        <div class="titlebar" style="background-color: white;">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-user"></i>
            </a>
            <h1 class="titlebar-title">${session.user.username!}</h1>
        </div>
        <div class="titlebar show365" style="background-color: white;display: -webkit-box;">
            <a class="titlebar-button" >
                <i class="icon icon-time"></i>
            </a>
            	   <button type="button" data-price="120" data-oldprice="135" class="button  btnprice outline " style="width: 60px;height: 24px;border-radius: 15px;margin-right: 2px;">3个月</button>
                   <button type="button" data-price="200" data-oldprice="270" class="button  btnprice  outline " style="width: 60px;height: 24px;border-radius: 15px;margin-right: 2px;">6个月</button>
                   <button type="button" data-price="365" data-oldprice="540" class="button  btnprice  outline active" style="width: 60px;height: 24px;border-radius: 15px;margin-right: 2px;">12个月</button>
                   <button type="button" data-price="45" data-oldprice="45" class="button  btnprice  outline " style="width: 60px;height: 24px;border-radius: 15px;margin-right: 2px;">1个月</button>
        </div>
        <div class="titlebar showvip" style="background-color: white;display: none;">
            <a class="titlebar-button" >
                <i class="icon icon-time"></i>
            </a>
            <button type="button" data-price="9800" data-oldprice="12000" class="button  btnprice outline active" style="width: 60px;height: 24px;border-radius: 15px;margin-right: 2px;">12个月</button>
                   
        </div>
        <div class="titlebar show365" style="background-color: white;display: -webkit-box;">
            <a class="titlebar-button" >
                <i class="icon icon-rdorem"></i>
            </a>
            	<h1 id="pricetxt" style="color:red; ">365</h1>元&nbsp;&nbsp;
            	<small style="text-decoration:line-through;">原价<font id="oldpricetxt">540</font>元</small>
        </div>
        <div class="titlebar showvip" style="background-color: white;display: none;">
            <a class="titlebar-button" >
                <i class="icon icon-rdorem"></i>
            </a>
            	<h1 id="pricetxt" style="color:red; ">9800</h1>元&nbsp;&nbsp;
            	<small style="text-decoration:line-through;">原价<font id="oldpricetxt">12000</font>元</small>
        </div>
        <div class="titlebar show365" style="background-color: white;">
            <button class="button block" style="margin:8px;border-radius: 4px;width: 96%;background-color: #f4984e;color: white;">立即开通</button>
        </div>
        <div class="titlebar showvip" style="background-color: white;display: none;">
            <a class="button block" href="${root}vip/pay?price=9800&type=vip" style="margin:8px;border-radius: 4px;width: 96%;background-color: #f4984e;color: white;">立即开通</a>
        </div>
                    
            <div class="titlebar" style="background-color: white;text-align: center;">
           				<h6 class="titlebar-title" ><small class="text-center" style="font-size: 12px;">会员服务协议</small></h6>
        </div>       
            		</div>
        </div>
        </form>
	</div>
	<div class="mask" style="visibility: visible; opacity: 1;display: none;z-index: 998px;"></div>
	<script src="${root}js/jquery-2.1.3.js"></script> 
    <script src="${root}js/seedsui.min.js"></script> 
	<script>
		$(function(){
			$("#kthy").on("click",function(){
				$("#kt").css("display","block")
				$(".mask").css("display","block")
			})
			$("#kthyclose").on("click",function(){
				$("#kt").css("display","none")
				$(".mask").css("display","none")
			})
			
			$(".btnprice").on("click",function(){
				if(!$(this).hasClass("active")){
					$(".btnprice").removeClass("active")
					$(this).addClass("active")
				}
				$("#pricetxt").text($(this).attr("data-price"))
				$("#oldpricetxt").text($(this).attr("data-oldprice"))
				$("#price").val($(this).attr("data-price"))
			})
			
			$(".tabvip").on("click",function(){
				if(!$(this).hasClass("active")){
					$(".tabvip").removeClass("active")
					$(this).addClass("active")
				}
				if($(".show365").css("display")=="none"){
					$(".showvip").css("display","none")
					$(".show365").css("display","-webkit-box")
				}else{
					$(".show365").css("display","none")
					$(".showvip").css("display","-webkit-box")
				}
			})
			<!--:if(!isEmpty(p.uid)){-->
			$("#kthy").click();
			<!--:}-->
		})
		function back(){history.go(-1);}
	</script>
</body>
</html>
